<template>
  <li class="dynamicItem">
    <el-row class="info">
      <el-col class="info__col" :span="2"
        ><el-avatar :src="`${avatar}/${item.author.img}`" :size="40"></el-avatar
      ></el-col>
      <el-col class="info__col info__name" :span="8">
        <nuxt-link :to="`/author/${item.author.id}/dynamic`">
          {{ item.author.name }}
        </nuxt-link>
      </el-col>
      <el-col class="info__col info__time" :span="8" :offset="6">
        {{ item.time }}
      </el-col>
    </el-row>
    <el-row class="news" :gutter="10">
      <el-col :span="6" class="image">
        <nuxt-link :to="`/news/${item.id}`">
          <el-image
            style="border-radius:4px;width: 100%; height:100%"
            :src="`${images}/${item.imgUrl}`"
            fit="cover"
          ></el-image>
        </nuxt-link>
      </el-col>
      <el-col :span="18">
        <el-row class="title">
          <nuxt-link :to="`/news/${item.id}`" :underline="false">{{
            item.title
          }}</nuxt-link>
        </el-row>
        <el-row class="introduce">
          {{ item.content }}
        </el-row>
        <el-row class="newsInfo">
          <el-col :span="6" class="info--color"
            >浏览数：{{ item.browse }}</el-col
          >
          <el-col :span="6" class="info--color"
            >评论数：{{ item.comments }}</el-col
          >
          <el-col :span="8" class="info--color">
            板块：
            <nuxt-link :to="`/class/${classification.id}/0`">{{
              classification.name
            }}</nuxt-link>
            &nbsp;-&nbsp;
            <nuxt-link :to="`/class/${classification.id}/${map.id}`">{{
              map.name
            }}</nuxt-link>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </li>
</template>

<script>
import { AVATAR, IMAGES } from '@/assets/js/settings'
export default {
  name: 'DynamicItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    avatar() {
      return AVATAR
    },
    images() {
      return IMAGES
    },
    classification() {
      return this.$store.getters['classification/aclass'](this.item.classId)
    },
    map() {
      return this.$store.getters['classification/amap'](
        this.item.classId,
        this.item.mapId
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dynamicItem {
  padding: 10px 10px;
}
.info {
  height: 40px;
}
.info__col {
  height: 100%;
  @include flexCenter();
}

.info__name {
  @include font(16px);
  @include flexCenter($jc: flex-start);
}
.info__time {
  @include font($color: #999);
  @include flexCenter($jc: flex-end);
}
.news {
  margin-top: 10px;
  height: 104px;
}
.image {
  height: 100%;
  a {
    display: block;
    height: 100%;
  }
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  @include font(16px);
}
.introduce {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 60px;
}
.info--color {
  color: #999;
  a {
    color: #999;
    &:hover {
      color: $--color-primary;
    }
  }
}
</style>
